<template>
  <div class="Detail_business">
    <PullRefresh
      class="contractInfo-detail detail"
      v-model="refreshing"
      @refresh="onRefresh"
    >
      <List
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        :immediate-check="false"
        @load="onLoad"
      >
        <div>
          <div v-for="(v, i) in list" :key="i" class="info pb-12px">
            <h4 class="flex justify-between pb-12px items-center">
              <div class="name">{{ v.contractName }}</div>
              <div>
                <Tag
                  plain
                  type="primary"
                  size="mini"
                  :class="'tagtype' + v.contractStatus"
                  v-if="v.contractStatusStr"
                  >{{ v.contractStatusStr }}</Tag
                >
              </div>
            </h4>
            <div class="mt-12px">
              <span class="inline-block mr-4px">合同编号：</span>
              <span style="color: #333333">{{ v.contractNo }}</span>
            </div>
            <div class="mt-12px">
              <span class="inline-block mr-4px">签署时间：</span>
              <span style="color: #333333">{{ v.signTime }} </span>
            </div>
            <div class="mt-12px">
              <span class="inline-block mr-4px">合作期限：</span>
              <span style="color: #333333"
                >{{ v.contractStart }} ~ {{ v.contractEnd }}</span
              >
            </div>
            <div class="mt-12px">
              <span class="inline-block mr-4px">签署&ensp; BD：</span>
              <span style="color: #333333">{{ v.signName }} </span>
            </div>
          </div>
        </div>
      </List>
    </PullRefresh>
  </div>
</template>

<script>
import { contract } from "@/services/business/HighSeas.js";
import { Tag, PullRefresh, List, Toast } from "vant";
export default {
  components: {
    Tag,
    PullRefresh,
    List,
  },
  props: {
    detailType: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      id: null,
      list: [],
      loading: false,
      refreshing: false,
      finished: false,
    };
  },

  methods: {
    change(val) {
      this.id = val;
      this.onRefresh();
    },
    onLoad() {
      setTimeout(() => {
        if (this.refreshing) {
          this.refreshing = false;
        }
        this.loading = false;
        this.finished = true;
      }, 1000);
    },
    onRefresh() {
      this.finished = false;
      // this.loading = true;
      // this.onLoad();
      this.getData();
    },
    getData() {
      this.loading = true;
      contract({ id: this.id })
        .then((res) => {
          this.loading = false;
          this.refreshing = false;
          this.list = res;
        })
        .catch((err) => {
          Toast(err.errMessage || err.message);
          this.loading = false;
        });
    },
  },
};
</script>

<style lang="less" scoped>
.Detail_business {
  height: calc(100vh - 90px);
  overflow: auto;
  padding-bottom: 10px;
}
.contractInfo-detail {
  .info {
    padding-top: 16px;
    margin: 10px;
    background-color: #fff;
    border-radius: 8px;
    color: #666;
    font-size: 13px;
    & > div {
      margin-left: 12px;
    }
    h4 {
      border-bottom: 1px solid #f5f5f5;
      .name {
        max-width: 260px;
        font-size: 16px;
        font-weight: 600;
        color: #333;
        display: flex;
        align-items: center;
        flex-grow: 1;
        &:before {
          content: "";
          border-left: 4px solid #1d6fe9;
          margin-right: 8px;
          height: 12px;
          display: block;
        }
      }
      .van-tag--mini {
        word-spacing: normal;
        border-radius: 16px;
        background-color: #e7f1ff;
        color: #1d6fe9;
        font-size: 11px;
        padding: 2px 8px;
        margin-right: 12px;
        height: 20px;
      }

      .tagtype6,
      .tagtype0 {
        // 作废
        color: #999999;
        background-color: #f5f5f5;
      }
      .tagtype5 {
        // 驳回
        color: #f55f4e;
        background-color: #ffe6e6;
      }
      .tagtype4 {
        // 已签约
        background-color: #f1fff2;
        color: #57ae59;
      }
    }
    .van-button--mini {
      border: none;
      .van-button__text {
        color: #1d6fe9;
        font-size: 14px;
      }
    }
  }
}
</style>
